<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
        }
        #div1{background: green}
        #div2{background: red; display: none;}
    </style>
    <script>
        function $(id){return document.getElementById(id);}
        window.onload=function(){
            $("but2").addEventListener("click",function () {
                $("div2").style.display = 'block';
                $("div1").style.display = 'none';
            })
            $("but1").addEventListener("click",function () {
                $("div1").style.display = 'block';
                $("div2").style.display = 'none';
            })
        }
    </script>
</head>
<body>
       <button id="but1">显示DIV1</button>
       <button id="but2">显示DIV2</button>
       <div style="border:1px solid red;">
           <div id="div1"></div>
           <div id="div2"></div>
       </div>

</body>
</html>